<template>
    <div id="new-menu">
        <div class="container">
            <div class="container-left">
                <div class="container-left-header">
                    <el-button type="primary" size="mini"
                        @click="() => { menuVisible = true, this.menuForm.addORupdate = true }">
                        添加菜单
                    </el-button>
                    <el-button type="primary" size="mini" @click="moveMenu(true)">
                        上移
                    </el-button>
                    <el-button type="primary" size="mini" @click="moveMenu(false)">
                        下移
                    </el-button>
                </div>
                <div class="container-left-main">
                    <el-table :data="menuList" highlight-current-row row-key="id" default-expand-all border height="90%"
                        @row-dblclick="chooseRowDB" @row-click="chooseRow">
                        <el-table-column prop="label" label="菜单名称" align="left" width="200">
                        </el-table-column>
                        <el-table-column prop="path" label="路径" align="center" min-width="200">
                        </el-table-column>
                        <el-table-column prop="" label="操作" align="center" width="250">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="chooseRowDB(scope.row)">{{
                                    scope.row.type == '0' ? '修改菜单' : '修改目录' }}</el-button>
                                <el-button type="danger" size="mini" @click="deleteMenu(scope.row)">删除菜单</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="container-right">
                <el-table :data="menuList" stripe highlight-current-row row-key="id" default-expand-all>
                    <el-table-column prop="label" label="名称">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog :title="this.menuForm.addORupdate ? '新增' : '修改'" :visible.sync="menuVisible" width="400px"
            append-to-body>
            <el-form :model="menuForm" ref="Form" label-width="150px" :inline="false" size="normal" label-position="right"
                :rules="rules">
                <el-form-item label="菜单路径" prop="path">
                    <el-input v-model="menuForm.path" width="200"></el-input>
                </el-form-item>
                <el-form-item label="菜单名称" prop="label">
                    <el-input v-model="menuForm.label" width="200"></el-input>
                </el-form-item>
                <el-form-item label="父菜单" prop="parentID">
                    <el-select v-model="menuForm.parentID" value-key="" placeholder="" clearable filterable allow-create>
                        <el-option v-for="item in menuRootList" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否菜单目录" size="normal" prop="type">
                    <el-switch v-model="menuForm.type" active-value='1' inactive-value='0'></el-switch>
                </el-form-item>
                <el-form-item label="是否管理员目录" size="normal" prop="type">
                    <el-checkbox v-model="menuForm.isAdmin" label="" :indeterminate="false" @change=""></el-checkbox>
                </el-form-item>
                <div style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <el-button type="primary" @click="onSubmit" v-show="this.menuForm.addORupdate">立即创建</el-button>
                    <el-button type="primary" @click="onSubmit" v-show="!this.menuForm.addORupdate">确认修改</el-button>
                    <el-button @click="menuVisible = false">取消</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'new_menu',
        data() {
            return {
                menuList: [],
                menuForm: {
                    addORupdate: true // true:新增 ； false:修改
                },
                menuVisible: false,
                menuRootList: [],
                rules: {
                    path: [
                        { required: true, message: '请填写菜单开发路径', trigger: 'blur' }
                    ],
                    label: [
                        { required: true, message: '请填写菜单名称', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '选择菜单类型', trigger: 'blur' }
                    ]
                },
                currentRow: {}
            }
        },
        watch: {
            menuVisible: {
                handler(newVal, oldVal) {
                    if (newVal) {
                        this.GetMenuRootList()
                    }
                },
            },
            menuList: {
                deep: true,
                immediate: true,
                handler() {
                    this.$BUS.$emit('menuAlter')
                }
            }
        },
        methods: {
            GetMenuList() {
                this.$GET('/menu/getMenuList', { isAdmin: true })
                    .then((res) => {
                        this.menuList = res.data.data
                    }).catch((res) => {
                        this.$message({
                            message: res.data.msg,
                            duration: 1000,
                            type: 'error'
                        })
                    })
            },
            onSubmit() {
                this.$refs.Form.validate(valid => {
                    if (valid) {
                        let path = this.menuForm.path
                        /**
                         * @param {Array<{children:Array}>} data 
                         * @returns {boolean}
                         */
                        let FindItem = function (data) {
                            return data.some(item => {
                                if (item.path == path) return true
                                if (item.children.length) {
                                    return FindItem(item.children)
                                } else return false
                            })
                        }
                        if (this.menuList.length) {
                            if (FindItem(this.menuList)) {
                                this.$message({
                                    duration: 1000,
                                    type: 'error',
                                    message: '该路径已有菜单'
                                })
                                return
                            }
                        }
                        let loading = this.$loading({
                            target: '#new-menu',
                            text: '添加中'
                        })
                        if (this.menuForm.addORupdate) {
                            this.$POST('/menu/insertMenu', this.menuForm)
                                .then((res) => {
                                    this.menuList = res.data.data
                                    setTimeout(() => {
                                        loading.close()
                                    }, 200)
                                    this.menuVisible = false
                                    this.menuForm = {}
                                }).catch(res => {
                                    loading.close()
                                    this.$message({
                                        type: 'error',
                                        duration: 1000,
                                        message: res.data.msg
                                    })
                                }).finally(_ => this.GetMenuList())
                        } else {
                            this.$PUT('/menu/updateMenu', this.menuForm)
                                .then((res) => { }).catch(_ => { })
                        }

                    } else {
                        console.log('表单验证失败！');
                        return false;
                    }
                })
            },
            GetMenuRootList() {
                this.$GET('/menu/getMenuRootList')
                    .then((res) => {
                        this.menuRootList = res.data.data
                    }).catch(() => { })
            },
            // 
            deleteMenu(row) {
                this.$confirm('确定删除菜单?', {
                    center: true,
                    message: '确定删除菜单?',
                }).then(_ => {
                    this.$DELETE('/menu/deleteMenu', row).then((res) => {
                        this.$message({
                            type: 'success',
                            duration: 1000,
                            message: '删除成功'
                        })
                    }).catch(_ => {
                        this.$message({
                            type: 'error',
                            duration: 5000,
                            message: '删除失败'
                        })
                    }).finally(() => {
                        this.GetMenuList()
                    })
                })
            },
            moveMenu(state) {
                if (!this.currentRow?.id) {
                    this.$message({
                        type: 'info',
                        duration: 1000,
                        message: '请选择行'
                    })
                    return
                }
                console.log(this.currentRow);
                this.$PUT('/menu/moveMenu', { state }).then((res) => {
                    this.GetMenuList()
                    this.$message({
                        duration: 1000,
                        type: 'success',
                        message: res.data.msg
                    })
                }).catch(_ => {
                    this.$message({
                        duration: 1000,
                        type: 'error',
                        message: '操作失败'
                    })
                })
            },
            chooseRow(row, column, event) {
                this.currentRow = JSON.parse(JSON.stringify(row))
            },
            // 
            chooseRowDB(row, column, event) {
                this.menuForm = JSON.parse(JSON.stringify(row))
                this.menuVisible = true
                this.menuForm.addORupdate = false
                console.log(this.menuForm);
            }
        },
        mounted() {
            this.GetMenuList()
        }
    }
</script>

<style scoped lang="less">
    #new-menu {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
            background-color: var(--main-bg-color-gray);
            overflow: hidden;

            .container-left {
                width: 50%;
                height: 100%;
                flex: 3;
                margin: 20px;
                border: 1px solid var(--main-box-shadow-color);
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                overflow: hidden;

                .container-left-header {
                    width: 100%;
                    height: 10%;
                    min-height: 60px;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    border: 1px solid var(--main-box-shadow-color);

                    button {
                        margin: 10px;
                    }
                }

                &-main {
                    width: 100%;
                    height: 100%;
                    margin: 0px 10px;
                    display: flex;
                    flex-grow: 1;
                }
            }

            &-right {
                width: 50%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                flex: 2;
                margin: 20px;
                border: 1px solid var(--main-box-shadow-color);
            }
        }
    }
</style>